@import '~@reach/menu-button/styles.css';

.trigger-button {
    padding: 0.25rem;
}

.menu-list[data-reach-menu-items] {
    font-size: inherit;
    overflow: hidden;
    padding: 0.25rem 0;
    background-color: var(--dropdown-bg);

    // Explicit override @reach ui border styles
    border: 1px solid var(--dropdown-border-color);

    // The .dropdown-menu class adds absolute position to the element
    // that makes parent of this element wrong width/height settled
    // Therefore this breaks popover position of reach-ui popover
    position: static;
}

.menu-item[data-reach-menu-item] {
    padding: 0.25rem 0.75rem;
    text-align: right;
    width: 100%;
    border-radius: 0;
    transition: unset;
    font-weight: unset;

    &[data-selected] {
        background-color: var(--link-color);
        color: var(--light-text);
    }
}

.menu-item {
    &--danger {
        color: var(--danger);
    }

    &--link[data-reach-menu-item] {
        text-decoration: none;
    }
}
